<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">
        任务量占比
        <div class="sn-title-more">
          <a href="#">
            <img src="@/assets/img/sn-title.png" />
          </a>
        </div>
      </div>
      <div class="sn-body">
        <div class="wrap-container">
          <div id="nightingaleChart" class="nightingaleChart"></div>
          <div class="digitalShow ">
            <div class="flex-1 bg-color-black">
              <p class="flex-1 bg-info color-white ">计划完成任务</p>
              <div class="dataSum flex-2">
                <dv-digital-flop class="bg-info" :config="config1" style="width:100%;height:100%;" />
              </div>
            </div>
            <div class="flex-1 bg-color-black">
              <p class="flex-1 color-white ">实际完成任务</p>
              <div class="dataSum flex-2">
                <dv-digital-flop class="bg-info" :config="config2" style="width:100%;height:100%;" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getDeptTask } from '@/api/home'
  import { nextTick } from 'vue'
  export default {
    name: 'nightingaleEchart',
    data() {
      return {
        nightingaleOption: null,
        primevalData: [],
        dataLegend: ["运营中心", "研发中心", "营销中心", "交付中心", "财务中心"],
        dataShow: [
          { value: 10, name: "运营中心" },
          { value: 5, name: "研发中心" },
          { value: 15, name: "营销中心" },
          { value: 25, name: "交付中心" },
          { value: 20, name: "财务中心" }
        ],
        config1: {
          number: [100],
          content: '{nt}个'
        },
        config2: {
          number: [80],
          content: '{nt}个'
        }
      };
    },
    async mounted() {
      // await this.getData();
      this.getOption();
      let chartNightingale = {
        id: 'nightingaleChart',
        chart: null,
        options: this.nightingaleOption
      }
      nextTick(() => {
        chartNightingale.chart = this.$echarts.init(document.getElementById(chartNightingale.id));
        chartNightingale.chart.setOption(chartNightingale.options);
      })
      window.addEventListener('resize', () => {
        chartNightingale.chart.resize()
      })
    },
    methods: {
      getOption() {
        let option =
        {
          color: [
            "#ff9232",
            '#d5c245',
            '#01a455',
            '#85adfb',
            '#c36885'
          ],
          tooltip: {
            trigger: "item",
            formatter:
              this.getFormatter()
          },
          toolbox: {
            show: true
          },

          calculable: true,
          legend: {
            orient: "horizontal",
            icon: "circle",
            bottom: 0,
            x: "center",
            data: this.dataLegend,
            textStyle: {
              color: "#fff"
            },
            top: "top"
          },
          label: {
            color: '#56B1FF',
          },
          series: [
            {
              name: "部门实际任务统计",
              type: "pie",
              radius: [30, 100],
              center: ['50%', '50%'],
              roseType: "area",
              data: this.dataShow,
            }
          ]
        }
        this.nightingaleOption = option;
      },
      // 属性
      getFormatter() {
        return "{a} <br/>{b} : {c} ({d}%)";
      },

      // 获取数据
      async getData() {
        let res = await getDeptTask();
        if (res.data.code === 200) {
          this.primevalData = res.data.rows;
          this.formatData(res.data.rows);
        }
      },
      formatData(data) {
        this.dataLegend = [];
        this.dataShow = [];
        for (let item of data) {
          this.dataLegend.push(item.deptName);
          let temp = {}
          temp.value = item.deptActualCompl;
          temp.name = item.deptName;
          this.dataShow.push(temp);
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .sn-container {
    width: 25%;
    height: 100%;

    .nightingaleChart {
      width: 100%;
      height: 84%;
      top: 1rem;
    }

    .digitalShow {
      width: 100%;
      height: 14%;
      display: flex;
      display: none;

      .bg-color-black {
        margin: 0rem 0.625rem;
        display: flex;
        border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
        overflow: hidden;

        p {
          height: 100%;
        }
      }
    }
  }
</style>